<!-- @format -->

<script setup>
  import { ref, reactive } from 'vue';
  import * as core from '@/core';

  const state = reactive({
    loading: false,
  });

  const hz = ref('中');
  const result = ref(null);
  function onQuery() {
    state.loading = true;
    core
      .searchHZ(hz.value)
      .then((resp) => {
        console.log('coverhanz', resp);
        const { success, data } = resp.data;
        if (success && data.length) {
          result.value = data[0];
        }
      })
      .finally(() => {
        state.loading = false;
      });
  }
</script>
<template>
  <main class="flex flex-col w-full h-full gap-3 relative">
    <div class="flex-none flex align-middle justify-center gap-3 sticky top-0 bg-green-50 p-2">
      <InputText
        type="search"
        v-model.trim="hz"
        rounded
        placeholder="输入你想查询的汉字"
        class="w-3/4" />
      <Button
        label="搜索"
        severity="success"
        rounded
        size="large"
        @click="onQuery"
        :disabled="!hz" />
    </div>
    <p v-if="state.loading">搜索中.....</p>
    <template v-if="result">
      <div class="px-2 pb-2">
        <div class="flex flex-row">
          <div class="basis-1/3">拼音</div>
          <div class="flex-grow">{{ result.pinyin }}</div>
        </div>
        <div>注解:</div>
        <template
          v-for="(item, index) in result.explanation.split('\n\n').filter((c) => c.length > 3)"
          :key="index">
          <div>{{ item }}</div>
        </template>
      </div>
    </template>
  </main>
</template>
